<!DOCTYPE html>
<html lang="en">
<head>
    <title>分页获取员工信息</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/laypage.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/laypage/laypage.js" charset="utf-8"></script>
    <script src="/js/vue/vue.min.js"></script>
    <script src="/js/layer/layer.js" charset="utf-8"></script>
</head>
<body>
<section id="container">
<#include "sider.ftl">
    <section id="main-content">
        <section class="wrapper">
            <div class="table-agile-info">
                <div class="panel panel-default" id="app">
                    <section class="panel">
                        <div class="panel-heading">
                            员工基本信息表
                        </div>
                        <form style="padding-top: 20px;" id="keywordForm">
                                <label for="buuid">支点:</label>
                                <select name="buuid" id="buuId" style="width: 100px;height: 30px">
                                    <option>请选择支点</option>
                                    <option class="buuIdClass" v-for="(item,index) in result1"
                                            v-bind:value="item.buuid">
                                        {{item.bname}}
                                    </option>
                                </select>

                                <label for="ruuid">角色:</label>
                                <select name="ruuid" id="ruuId" style="width: 100px;height: 30px">
                                    <option>请选择角色</option>
                                    <option class="ruuIdClass" v-for="(item,index) in result2"
                                            v-bind:value="item.ruuid">
                                        {{item.rname}}
                                    </option>
                                </select>

                                <input type="text" id="keyword" style="height: 30px">

                                <input type="button" id="keywordBut" style="height: 30px" value="搜">
                        </form>
                        <div class="panel-body minimal">
                            <div class="table-inbox-wrap">
                                <table class="table table-inbox table-hover">
                                    <thead>
                                    <tr>
                                        <th>
                                            <input type="checkbox" name="checkAll" id="checkAll">
                                        </th>
                                        <th>序号</th>
                                        <th>姓名</th>
                                        <th>手机号</th>
                                        <th>出生日期</th>
                                        <th>居住地址</th>
                                        <th>入职时间</th>
                                        <th>操作</th>
                                        <th></th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr v-for="(item,index) in result3">
                                        <td>
                                            <input type="checkbox" class="inputBox" v-bind:value="item.euuId">
                                        </td>
                                        <td>
                                            <span class="text-ellipsis">{{index+1}}</span>
                                        </td>
                                        <td>
                                            <span class="text-ellipsis">{{item.empName}}</span>
                                        </td>
                                        <td>
                                            <span class="text-ellipsis">{{item.empPhone}}</span>
                                        </td>
                                        <td>
                                            <span class="text-ellipsis">{{item.empBirthday}}</span>
                                        </td>
                                        <td>
                                            <span class="text-ellipsis">{{item.empAddress}}</span>
                                        </td>
                                        <td>
                                            <span class="text-ellipsis">{{item.empHireDate}}</span>
                                        </td>
                                        <td>
                                            <input class="btn btn-success" type="button"
                                                   @click="updateEvent(item.euuId)" value="修改">
                                        </td>
                                        <td>
                                            <input class="btn btn-danger" type="button" @click="delEvent(item.euuId)"
                                                   value="删除">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <input type="button" class="btn btn-danger" value="批量删除" id="deleteEmp">
                                        </td>
                                        <td colspan="6">
                                            <div id="pageNav"></div>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </section>
                </div>
            </div>
        </section>
    <#include "/foot.html">
    </section>
</section>
</body>
</html>
<script>
    /*页面加载触发*/
    var app = new Vue({
        el: "#app",
        data: {
            result1: [],
            result2: [],
            result3: []
        }
    });
    var getBranchList = function () {
        $.ajax({
            url: "/emp/doGetBranchList.do",
            type: "post",
            dataType: "json",
            success: function (data) {
                app.result1 = data.branchList;
            }
        });
    };
    getBranchList();
    var getRoleList = function () {
        $.ajax({
            type: "POST",
            url: "/emp/getAllRole.do",
            dataType: "json",
            success: function (data) {
                app.result2 = data.roleList;
            }
        });
    };
    getRoleList();
    /*====================获取员工集合====================*/
    /*查询员工数据*/
    var getEmpByPageList = function (curr) {
        $.ajax({
            url: "/emp/toGetEmpByPage.do",
            type: "post",
            dataType: "json",
            data: {
                pageSize: 5,
                pageNum: curr || 1,
                keyword: $("#keyword").val(),
                buuid: $("#buuId").find("option[class='buuIdClass']:selected").val(),
                ruuid: $("#ruuId").find("option[class='ruuIdClass']:selected").val()
            },
            success: function (data) {
                app.result3 = data.page;
                $("#spanId").html(data.total);
                laypage({
                    cont: 'pageNav',  //分页容器
                    pages: data.totalPage, //总页数
                    skin: '#336699',
                    first: '第一页',
                    last: '最后一页',
                    curr: curr || 1,
                    jump: function (obj, first) {
                        if (!first) {
                            getEmpByPageList(obj.curr);
                        }
                    }
                });
            }
        });
    };
    getEmpByPageList();
    /*多条件查询*/
    $("#keywordBut").click(function () {
        getEmpByPageList();

    });
    /*支点下拉框*/
    $("#buuId").change(function () {
        getEmpByPageList();
    });
    /*角色下拉框*/
    $("#ruuId").change(function () {
        getEmpByPageList();
    });
    /*删除用户*/
    var delEvent = function (euuId) {
        layer.confirm('确认删除？', {
            btn: ['是', '否']
        }, function () {
            $.ajax({
                type: 'post',
                dataType: "JSON",
                url: '/emp/toDelEmp.do',
                data: {
                    euuId: euuId
                },
                success: function () {
                    layer.msg('成功删除', {icon: 6});
                    getEmpByPageList();
                }/*,
                error:function () {
                    alert("failure");
                }*/
            });
        }, function () {
        });
    };
    /*批量删除*/
    //用来全选和取消全部选择
    $("#checkAll").bind("click", function () {
        $("input:checkbox[class='inputBox']").prop("checked", this.checked);
    });
    //给批量删除的button绑定点击事件
    var batchDelete = function (euuIdList) {
        layer.confirm('确认删除吗？', {
                    btn: ['残忍删除', '我再想想']
                },
                function () {
                    $.ajax({
                        url: '/emp/toDelsEmp.do',
                        type: 'POST',
                        data: {
                            euuIdList: euuIdList
                        },
                        success: function () {
                            layer.msg("删除成功", {icon: 6});
                            getEmpByPageList();
                            /*状态复原*/
                            $("input:checkbox").prop("checked", false);
                        },
                        error: function () {
                            location.reload();
                        }
                    });
                },
                function () {
                    window.location.reload()
                }
        );
    };
    $("#deleteEmp").click(function () {
        var checkedNum = $("input[type='checkbox']:checked[class='inputBox']").length;
        if (checkedNum == 0) {
            layer.msg("请至少选择一项!", {icon: 6});
            return false;
        }
        var euuIdList = new Array();
        //给每一个选中的标签都绑定一个方法
        $("input[type='checkbox']:checked[class='inputBox']").each(function () {
            //将标签的值放入数组中
            euuIdList.push($(this).val());//此处添加不能使用add  add不是一个function
        });
        batchDelete(euuIdList);
    });
    /*修改员工信息*/
    var updateEvent = function (euuId) {
        layer.open({
            type: 2,
            title: '添加员工',
            shadeClose: true,
            shade: false,
            maxMin: true,
            area: ['900px', '560px'],
            content: '/emp/toUpdateEmpTable.do?euuId=' + euuId,
            end: function () {
                getEmpByPageList();
            }
        });
    }
</script>